<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="./jquery-1.11.0.js"></script>
</head>
<body>

    <div data-toggle="modal" data-target="#mymodal">
        click me toggle modal
    </div>


    <div id="stopBtn">
        stop click handle by off click's namespace
    </div>

    <div id="mymodal">
        this is mymodel
    </div>

    <script type="text/javascript">
        $('#mymodal').hide();
        $(document).on('click.bs.data-api', '[data-toggle="modal"]', function (e) {
            debugger;
            var tagetSelector = $(this).attr('data-target');
            $(tagetSelector).toggle();
        });

        $(document).on('click.bs.data-api', '#stopBtn', function (e) {
            console.log('stopBtn click event with namespace .bs.data-api');
            $(document).off('.bs','[data-toggle="modal"]');
        });

    </script>
</body>
</html>